<template>
    <div class="talk">
        <button @click="getTalk">获取一句土味情话</button>
        <ul>
            <li v-for="talk in talkStore.talkList" :key="talk.id">{{talk.content}}</li>
        </ul>
    </div>
</template>

<script setup lang="ts">
    import {reactive} from 'vue'
    import axios from 'axios'
    import {nanoid} from 'nanoid'
    import {useTalkStore} from '@/store/talk'
    
    const talkList=reactive([
        {id:'t0001',content:'今天是个好日子！'},
        {id:'t0002',content:'明天也是个好日子！'},
        {id:'t0003',content:'后天却不一定是个好日子！'}
    ])
    
    const talkStore=useTalkStore()

    /* const getTalk=()=>{
        axios.get('https://api.uomg.com/api/rand.qinghua?format=json').then(res=>{
            console.log(res.data.content)
            talkList.unshift({id:nanoid(),content:res.data.content})
        })
    } */
    
    async function getTalk(){
        let {data:{content}}=await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
        talkStore.talkList.unshift({id:nanoid(),content:content})
    }
        
    
</script>

<style scoped>
    .talk{
        background-color: orange;
        width: 400px;
        /* height: 100px; */
        border-radius: 10px;
    }
</style>